<template>
  <div>

    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
      <el-breadcrumb-item :to="{ path: '/sys-admin/home' }">
        <i class="el-icon-s-promotion"></i> 后台管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>轮播图列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <template>
      <el-table
          :data="tableData"
          border
          style="width: 100%">

        <el-table-column
            header-align="center"
            align="center"
            show-overflow-tooltip
            prop="bid"
            label="ID"
            width="200">
        </el-table-column>

        <el-table-column
            header-align="center"
            align="center"
            prop="url"
            label="图片"
            width="500">

          <template slot-scope="scope">
            <img :src="'http://localhost:9080/' + scope.row.url" alt="" style="width: 400px;height: 300px">
          </template>

        </el-table-column>

        <el-table-column header-align="center" align="center" label="操作" width="90">
          <template slot-scope="scope">

            <el-button @click="openDeleteComfirm(scope.row)" type="danger" icon="el-icon-delete" circle
                       size="mini"></el-button>

          </template>
        </el-table-column>

      </el-table>
    </template>

  </div>

</template>

<script>
export default {
  data() {
    return {
      tableData: [],

    }

  },

  methods: {
    openDeleteComfirm(banner) {

      let message = '此操作将永久删除【bid=' + banner.bid + '】的轮播图，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDeleteBanner(banner);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    handleDeleteBanner(banner) {
      let url = 'http://localhost:9080/banners/' + banner.bid + '/delete';
      console.log('url=' + url);

      this.axios.post(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '删除【bid=' + banner.bid + '】的轮播图成功!',
            type: 'success'
          });
          this.loadBannerList();
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadBannerList();
            }
          });
        }
      })
    },
    loadBannerList() {

      let url = 'http://localhost:9080/banners';
      console.log('url=' + url);

      this.axios.get(url).then((response) => {

        let jsonResult = response.data;
        if (jsonResult.state == 20000) {

          this.tableData = jsonResult.data;

          console.log(this.tableData)
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    }
  },
  mounted() {
    this.loadBannerList();
  }
}
</script>

<style scoped>

</style>